<blockquote class="layui-elem-quote">
  轮播图片管理
</blockquote>

<div class="layui-btn-container mt15 mb15">

    <button type="button" class="layui-btn layui-btn-normal layui-btn-radius" id="add">新增</button>
    
</div>

{include file="common/table" /}

<div class="main">

  <div class="main-left">
      <table class="layui-table" style="margin:0" lay-even>
          <thead>
            <tr>
              <th>ID</th>
            </tr> 
          </thead>
          <tbody>
              {volist name='lists' id='vo'}
              <tr>
                  <td>{$vo.id}</td>
              </tr>
              {/volist}
          </tbody>
      </table>
  </div>

  <div class="main-mid">
      <table class="layui-table" style="width:1500px ;margin:0" lay-even>
      <thead>
        <tr>
          <th>轮播图片</th>
          <th>标题</th>
          <th>语言版本</th>
          <th>别名</th>
          <th>排序</th>
          <th>是否显示</th>
          <th>描述</th>
          <th>跳转链接</th>
        </tr> 
    </thead>
    <tbody>
      {volist name='lists' id='vo'}
        <tr>
            <td style="width:150px;"><img src="{$vo.imgurl}" style="width:150px;height:50px;display: block;"></td>
            <td style="width:200px;font-size:12px">{$vo.title}</td>
            <td style="width:80px;font-size:12px">{$vo.lang}</td>
            <td>{$vo.alias}</td>
            <td>{$vo.sort}</td>
            <td>
              <form class="layui-form" action="">
                  <input type="checkbox" name="open" lay-skin="switch" lay-filter="switchTest" title="显示|隐藏" {if condition="$vo.isshow eq 1"}checked{/if} >
              </form>
            </td>
            <td  style="width:300px;font-size:12px">{$vo.descriptions}</td>
            <td style="font-size:12px">网页跳转链接:{$vo.url}</td>
        </tr>
     {/volist}

    </tbody>
  </table>
  </div>

  <div class="main-right">
    <table class="layui-table" style="margin:0" lay-even >
        <thead>
          <tr>
            <th>操作</th>
          </tr> 
        </thead>
        <tbody>
          {volist name='lists' id='vo'}
            <tr>
              <td>
                <div class="layui-btn-group">
                  <button type="button" class="layui-btn layui-btn-sm layui-bg-blue js-open" data-id="{$vo.id}">修改</button>
                  <!-- <button type="button" class="layui-btn layui-btn-sm layui-bg-red">删除</button> -->
                </div>
              </td>
            </tr>
          {/volist}
        </tbody>
    </table>
  </div>

</div>


<div id="laypage" style="text-align: center;"></div>


  
  <script>

  layui.use(function(){
    var laypage = layui.laypage;
    // 普通用法
    laypage.render({
      elem: 'laypage',
      count: "{$total}",// 数据总数
      curr:"{$page}"
    });

    $("#laypage a").on("click",function(){
      var page = $(this).attr("data-page");
      window.location.href="{:url('web.webadmin/index')}?page="+page
    })
  });



$(function(){

    $("#add").on("click",function(){
      window.location.href="{:url('web.swiper/add')}";
    })

    $(".js-open").on("click",function(){
      var id = $(this).attr("data-id");
      window.location.href="{:url('web.swiper/edit')}?id="+id;
    })

})



layui.use(['form'], function(){
    var form = layui.form;
    var layer = layui.layer;
    
    // 指定开关事件
    form.on('switch(switchTest)', function(data){
      // layer.msg('开关 checked：'+ (this.checked ? 'true' : 'false'), {
      //   offset: '6px'
      // });
      // layer.tips('温馨提示：请注意开关状态的文字可以随意定义，而不仅仅是 ON|OFF', data.othis)
    });
})

  </script>